﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row"></div>
        <br />
        <div class="row">
            @*HTML5新增了"multiple"属性,添加了该属性用户就可以在弹出的对话框中一次性选择多个文件了*@
            <input type="file" multiple="multiple" class="form-control" name="file" id="file" />
            <iframe src="http://192.168.1.7:8000/iframe/ifameHtml.html"></iframe>
        </div>
        <br />
        <div class="row" id="dropbox" style="border:2px solid red;height:100px;">
            @* <command type="checkbox" hidden="false" />*@
            Drop Here
        </div>
        
    </div>
</body>
</html>
<script type="text/javascript">
    var inputElement = $('#file');//document.getElementById("input");
    //inputElement.addEventListener("change", handleFiles, false);  //bind和原生的addEventListener是一样
    inputElement.bind('change', function () {
        var fileList = this.files;
        for (var i = 0 ; i < fileList.length ; i++) {
            console.log(fileList[i]);
        }
    });
    //function handleFiles() {
    //    var fileList = this.files;
    //    for (var i = 0 ; i < fileList.length ; i++) {
    //        console.log(fileList[i]);
    //    }
    //}

    @*----------------------*@

    //二、实现文件从计算机拖拽到网页以及添加文件队列功能
    //这里我们用 dragover 和 drop 两个事件来管理文件拖拽的功能
    //其中 dragover 用来处理在指定的元素上移动时的事件
    var dropbox = document.getElementById("dropbox");
    dropbox.addEventListener("dragover", dragFile, false);
    //dropbox.addEventListener("dragover", dragover, false);
    dropbox.addEventListener("drop", dropFile, false);

    //function dragenter(e) {
    //    e.stopPropagation();
    //    e.preventDefault();
    //}

    function dragFile(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy';
        var files = evt.dataTransfer.files;
        handleFiles(files);
    }
    //三、用 drop 事件来处理鼠标松开时候的事件，此时应该将用户拖动过来的文件加入到上传队列中，以供后续的处理
    function dropFile(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        // dataTransfer.files属性可以获取到所有拖动选择的文件，通过遍历可以读取到所有文件的信息。
        // 遍历每个文件可以获取到文件的 name、size、type、lastModifiedDate等关键信息
        var files = evt.dataTransfer.files;
        // addfile 方法 用来添加上传文件队列，在input的change事件中也需要调用
        // 该方法首先检查有无文件正在上传中，如果有就将后续加入的文件放到上传队列中，如果没有文件正在上传就直接执行上传命令
        //addfile(files);
    }

    function handleFiles(files) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var imageType = /image.*/;

            if (!file.type.match(imageType)) {
                continue;
            }

            var img = document.createElement("img");
            img.classList.add("obj");
            img.file = file;
            preview.appendChild(img);

            var reader = new FileReader();
            reader.onload = (function (aImg) {
                return function (e) {
                    aImg.src = e.target.result;
                };
            })(img);
            reader.readAsDataURL(file);
        }
    }
</script>
